<template>
	<view>
		<view class="c-text">{{output}}</view>
		<view class="c-text animated fadeIn infinite again">
			<u-icon :name="name" color="red"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['text', 'icon'],
		name: "outPut",
		data() {
			return {
				output: ''
			}
		},
		computed:{
			name(){
				if(!this.icon)
					return 'heart-fill';
				else
					return this.icon
			}
		},
		created() {
			setTimeout(() => {
				this.timing()
			}, 200)
		},
		methods: {
			timing(at = 1) {
				const {
					info,
					sppend
				} = this.text
				const timer = setTimeout(() => {
					this.timing(at + 1)
				}, 400)
				if (at >= info.length) {
					clearTimeout(timer)
				}
				this.output = info.substr(0, at)
			}
		}
	}
</script>

<style>
	.again {
		animation-direction: reverse;
		animation-duration: 400ms;
		color: red;
	}

	.c-text {
		display: initial;
	}
</style>
